

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  TouchableOpacity,
  Image,
  View,
  Modal,
  Switch,
} from 'react-native';
import Dimensions from 'Dimensions';

export default class CockpitModal extends Component {
    constructor(props) {  
        super(props);  
        this.state = {
          show:false, 
        };
    }  

    hiddenModal = () => {
        this.setState({
            show: false,
        });
    };

    showModal = () => {
        this.setState({
            show: true,
        });
    };


    // 显示/隐藏 modal  
    _setModalVisible() {  
        let isShow = this.state.show;  
        this.setState({  
            show:!isShow,  
        });
    }

    _confirm(){
        if(this.props.confirm){
            this.props.confirm();
        }
    }


    _cancel(){
        this._setModalVisible();
        if(this.props.cancel){
            this.props.cancel();
        }
    }
 
    render() {
    return (
        <Modal  
          animationType={this.props.animationType ? this.props.animationType : 'slide'}
          transparent={true}  
          visible={this.state.show}  
          onShow={() => {}}  
          onRequestClose={() => {}} >  
          <TouchableOpacity style={styles.container} onPress={this._cancel.bind(this)}>  
            <View style={styles.subView}>  
              
              {this.props.children}

              
            </View>  
          </TouchableOpacity>  
        </Modal>
      )}
    }


const styles = StyleSheet.create({
  container: {  
    backgroundColor:'#00000099',
    alignItems: 'center',  
    justifyContent:'center',  
    flex:1,  
    flexDirection:'column',
  },  
  // modal上子View的样式  
  subView:{
    backgroundColor:'#ffffff',  
    justifyContent:'center',  
    position:'absolute',
    bottom:50,
    width:Dimensions.get('window').width,
  },  
  // 标题  
  titleText:{  
    marginTop:10,  
    // marginBottom:5,     
    height:30,  
    fontSize:16,  
    fontWeight:'bold',  
    textAlign:'center',  
  },  
  // 水平的分割线  
  horizontalLine:{  
    // marginTop:5,  
    height: 1,  
    backgroundColor:'#ccc',  
  },  
  // 按钮  
  buttonView:{  
    flexDirection: 'row',  
    alignItems: 'center',  
  },  
  buttonStyle:{  
    flex:1,  
    height:40,  
    alignItems: 'center',  
    justifyContent:'center',  
  },  
  // 竖直的分割线  
  verticalLine:{  
    width: 1,  
    height:40,  
    backgroundColor:'#ccc',  
  },  
  buttonText:{  
    fontSize:16,  
    color:'#3393F2',  
    textAlign:'center',  
  }, 
});